<div class="row mg-t-lg">
    <div class="col-sm-3">
      {{ $currentRelPermalink := .Page.RelPermalink }}
      <div class="panel panel-default sidebar">
        <div class="panel-heading">
          <h4 class="panel-title">Topics</h4>  
        </div>
        <div class="list-group">
          <a href="/library/" class="list-group-item{{ if eq "/library/" $currentRelPermalink }} active{{ end }}">All Topics</a>
          {{ range .Topics }}
          <a href="{{ .RelPermalink }}" class="list-group-item{{ if eq $currentRelPermalink .RelPermalink }} active{{ end }}">
            <i class="fa fa-fw fa-circle topic-{{ .Title | urlize }}"></i> {{ .Title }}
          </a>
          {{ end }}
        </div>
      </div>
      
      <form class="text-center form-inline" action="https://google.com/search" method="get">
        <input type="hidden" name="as_sitesearch" value="code.makery.ch">
          <div class="input-group">
            <input type="text" class="form-control" name="q" results="0">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
            </span>
          </div>
      </form>
      <br>
    </div>
    
    <div class="col-sm-9">
    {{ range .Items }}
      {{ if .Params.overview }}
      <div class="library-panel">
        <a class="panel-link" href="{{ .RelPermalink }}">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">{{ .Title }}</h4>
            </div>
            <div class="panel-body">
              {{ $url := .Resources.GetMatch .Params.overviewImage }}
              {{ if $url }}
                <img src="{{ $url.RelPermalink }}" class="img-rounded">
              {{ else }}
                No image!
              {{ end }}
              <p class="small">{{ .Params.overviewDescription | markdownify }}</p>
            </div>
          </div>
        </a>
        <div class="topic-label-container">
        {{ range .Params.topics }}
          <a href="/library/topic/{{ . | urlize }}/" class="label label-topic-{{ . | urlize }}">{{ . }}</a>
        {{ end }}
        </div>
          
        <div class="language-buttons">
          <div class="hidden-xs">
          {{ range .AllTranslations }}
            <a href="{{ .RelPermalink }}" class="btn btn-default btn-xs">{{ .Language.LanguageName }}</a>
          {{ end }}
          </div>
          
          <div class="visible-xs-block">
            <div class="btn-group">
              <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-globe"></i> Languages <span class="caret"></span>
              </button>
              <ul class="dropdown-menu dropdown-menu-right" role="menu">
                {{ range .AllTranslations }}
                <li>
                    <a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
                </li>
                {{ end }}
              </ul>
            </div>
          </div>
        </div>
      </div>
      {{ end }}
    {{ end }}
    </div>
  </div>